<template>
  <div class="Course animated fadeInUp">
    <projectlist
      :title="'技能训练'"
      :type="1"
      :projectlist="dataList.getTrainin"
      :subtitle="'Skill train'"
    ></projectlist>
    <div class="paging" v-if="dataList.getTrainin.length">
      <el-pagination
        :pager-count="5"
        background
        layout="prev, pager, next"
        :total="dataList.total"
        :current-page="dataList.page"
        @current-change="changesize"
      />
    </div>
  </div>
</template>

<script setup>
  import { reactive, onBeforeMount } from "vue";
  import { getTrainingCourse } from "@/api/home.js";
  import { getTrainCenterList } from "@/api/home.js";
  import projectlist from "@/components/projectList.vue";

  const dataList = reactive({
    page: 1,
    tabid: 0,
    total: 0,
    getTrainin: [],
  });
  onBeforeMount(() => {
    // getTrainingCourseF()
    getTrainingCourseF("公共基础课", );
    
  });

  const changesize = (value) => {
    dataList.page = value;
    // getTrainingCourseF()
    getTrainingCourseF("公共基础课", );
  };


  //医考培训单独加入
  const getTrainCenterListF = (lists) => {
    var data = {
      projectId: "dxhzalctqitlv9umq3wtdg",
      page: dataList.page,
      pagesize: 1,
      hot: true,
    };
    getTrainCenterList(data).then((res) => {
      console.log(111)
      console.log(JSON.parse(res.list).obj);
      let oneData = JSON.parse(res.list).obj[0]
      console.log(2)
      console.log(oneData)
      // oneData.coursetitle = oneData.coursetitle
      lists.push(oneData)
      dataList.getTrainin = lists;
      // dataList.TrainingList = JSON.parse(res.list).obj || [];
      // dataList.total = res.materialCount;
    });
  };


  const getTrainingCourseF = (educationType) => {
    var data = {
      projectId: "dxhzalctqitlv9umq3wtdg",
      page: dataList.page,
      pagesize: 8,
      educationType,
    };
    getTrainingCourse(data).then((res) => {
      let lists = JSON.parse(res.list).obj;
      dataList.total = res.totalCount;
      dataList.page += 1;
      console.log(lists);
      for (var i = 0; i < lists.length; i++) {
        lists[i].coursetitle = lists[i].courseName;
      }
       //医考培训单独加入
      getTrainCenterListF(lists);
    });
  };
</script>

<style lang="scss" scoped>
  $width: 774px;

  @media screen and (min-width: 1200px) {
    .Course {
      width: $width;
      margin: 26px auto 0;
    }
    .paging {
      width: 100%;
      margin-bottom: 50px;
      display: flex;
      justify-content: center;
      :deep(.is-active) {
        background-color: #ff9933 !important;
      }
    }
  }
  @media screen and (max-width: 1200px) {
    .Course {
      width: 95vw;
      margin: 0 auto;
      margin-top: 5vw;
      min-height: 61vh;
    }
    .paging {
      width: 95vw;
      margin-bottom: 6vw;
      display: flex;
      justify-content: center;
      :deep(.is-active) {
        background-color: #ff9933 !important;
      }
    }
  }
</style>
